@charset "utf-8";
/* grid */
body { 
  display: grid;
  grid-template-areas: 
    "header header ads"
    "nav article article"
    "footer footer footer";
  grid-template-rows: 14% 1fr 12%;  
  grid-template-columns: 15% 1fr 20%;
  grid-row-gap: 10px;
  grid-column-gap: 10px;
  height: 100vh;
  margin: 0;
  }  
header, footer, article, nav, div {
  padding: 1.2em;
  background-color: antiquewhite;
  }
#pageHeader {
  grid-area: header;
  display: flex;
  justify-content: space-around;
  align-items: center;
  }
  #pageHeader>ul{
  list-style: none;
  }
  #pageHeader>ul>li{
    float: left;
    margin-left: 10px;
  }
#pageFooter {
  grid-area: footer;
}
  #pageFooter>ul{
    list-style: none;
  }
  #pageFooter>ul>li{
    float: left;
    margin-left: 10px;
  }
#mainArticle { 
  grid-area: article;
  display: flex;
  flex-direction: column;
  }
  #mainArticle>img{
    display: flex;
    flex-direction: row;
    order: 1;

  }
  .img{
    width: 30%;
    justify-content: center;
  }
  #mainArticle>text{
    order: 2;
  }
  #video{
    display: flex;
    flex-direction: row;
  }
  .video-title{
    display: flex;
    flex-direction: column;
  }
  .img-video{
    width: 100%;
  }
#mainNav { 
  grid-area: nav; 
  display: flex;
  flex-direction: column;    
  align-items: center;  
  }
#siteAds { 
  grid-area: ads; 
  } 
  #siteAds>p{
    margin: 0;
    padding: 0;
  }
  
  @media all and (max-width: 575px) {
    body { 
      grid-template-areas:
        "header"
        "ads"
        "nav"
        "article"
        "footer";
      grid-template-rows: 80px 14% 1fr 1fr 90px;  
      grid-template-columns: 1fr;
   }
  }